<template>
  <el-table :data="tableData" style="width: 100%" >
    <el-table-column label="注册时间" width="220" align="center">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </div>
      </template>
    </el-table-column>



    <el-table-column label="用户名" width="180">
      <template #default="scope">
        <el-tag>{{ scope.row.username }}</el-tag>
      </template>
    </el-table-column>

    <el-table-column label="性别" width="180">
      <template #default="scope">

        <el-tag>{{ scope.row.sex }}</el-tag>


      </template>
    </el-table-column>


    <el-table-column label="电话" width="180" align="center">
      <template #default="scope">
        <el-tag>{{ scope.row.phone }}</el-tag>

      </template>
    </el-table-column>

    <el-table-column label="地址" width="180" align="center">
      <template #default="scope">

        <el-tag>{{ scope.row.adr }}</el-tag>


      </template>
    </el-table-column>

    <el-table-column label="操作" width="260" align="center">
      <template #default="scope">
        <el-button size="small"  @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-if="true" v-model="dialogFormVisible" title="编辑信息" width="500">
    <el-form :model="form">
      <el-form-item label="用户名:" >
        <el-input disabled v-model="form.username" autocomplete="off" />
      </el-form-item>

      <el-form-item label="性别:" >
        <el-input disabled v-model="form.sex" autocomplete="off" />
      </el-form-item>

      <el-form-item label="电话:" >
        <el-input v-model="form.phone" autocomplete="off" />
      </el-form-item>

      <el-form-item label="地址:" >
        <el-input v-model="form.adr" autocomplete="off" />
      </el-form-item>


    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="upData">
          更新
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>

<script lang="ts" setup>
import {Timer, User} from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'

import { onBeforeMount, onMounted } from "vue";
import axios  from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

interface User {

  createTime: string
  // name: string
  username :string
  sex: string
  phone:string
  adr: string

}




const dialogFormVisible = ref(false)


const upData = () => {



  ElMessage.success(form.adr)
  ElMessage.success(form.username)
  axios.get("http://localhost:8090/updateUserInfo/"+form.username+"/"+form.phone+"/"+form.adr).then((response) => {
    console.log(response.data)

  })

  dialogFormVisible.value = true
  // router.push("/alltheinfo")

}



const handleEdit = (index: number, row: User) => {
  console.log(index, row)
  dialogFormVisible.value = true
  form.username = row.username
  form.sex =row.sex
  form.phone = row.phone
  form.adr= row.adr

  // dialogFormVisible =ref(true)
  // alert(dialogFormVisible.value)
  // alert(row.username)
}
const handleDelete = (index: number, row: User) => {
  console.log(row.username)
  axios.post("http://localhost:8090/deleteUser/"+row.username+"").then((response) => {
    console.log(response.data)
    if (response.data=="delete") {
      ElMessage.success("delete")

    }
  })
}



const tableData: User[] = reactive([

])


const form = reactive({
  createtTime:'',
  username: '',
  phone: '',
  sex:'',
  adr: '',

})


onBeforeMount(()=>{

  axios.get("http://localhost:8090/getAllUser/").then((res)=>{
    res = res.data
    console.log(res)
    console.log(res.length)

    for(var i=0; i<res.length; i++){

      console.log(i);
      tableData.push(res[i])

    }

  })

})
</script>